<template>
  <div>
    <!-- 页头 -->
    <van-sticky :offset-top="0">
      <van-nav-bar>
        <template #left>
          <router-link to="/Books">
            <van-icon name="arrow-left" size="18" />
          </router-link>
        </template>
        <template #right>
          <van-icon name="share-o" size="18" />
        </template>
      </van-nav-bar>
    </van-sticky>
    <!-- 图片 -->
    <van-swipe>
      <van-swipe-item>
        <img :src= bookdetail.pic1 alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 四级通关试卷 -->
    <div class="row">
      <div class="row-1"><span>{{bookdetail.title}}</span></div>
      <div class="row-2">
        <span>￥{{bookdetail.price}}</span
        ><span style="text-decoration: line-through">￥65.8</span>
      </div>
      <div class="row-3"><span>快递:0.00</span><span>销量:15906笔</span></div>
    </div>
    <!-- 详情 -->
    <van-tabs v-model="active">
      <van-tab title="详情">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item><img :src = bookdetail.pic2 alt="" /></van-swipe-item>
        </van-swipe>
      </van-tab>
      <!-- 评论 -->
      <van-tab title="评论">
        <div class="d1">
          <span>全部评论(185)条</span>
          <div>
            好评度:
            <van-rate
              v-model="value"
              size="11px"
              allow-half
              void-icon="star"
            />{{ value }}
          </div>
        </div>
        <div v-for="(item, i) in comment" :key="i">
          <div class="row-7">
            <div class="row-6"><img :src="item.pic" alt="" /></div>
            <div class="row-8">
              <span>{{ item.number }}</span
              ><span>{{ item.data }}</span>
            </div>
          </div>
          <div class="row-9">
            <span>{{ item.comment }}</span>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <!-- 底部 -->
    <div class="di" style=" display: flex;">
      <div class="bu">
        <div><img src="/924.png" alt=""></div>
        <div><span>客服</span></div>
         <img src="/68.png" alt="" @click="trolley">
      </div>
     
      <div style=" display: flex;" class="btn">
        <div class="jia">
          <button @click="addtrolley">加入购物车</button>
        </div>
        <button>立即购买</button>
      </div>
      
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      value: 2.5,
      comment: [
        {
          pic: "a.png",
          number: "182****7292",
          data: "2021-05-08 09:21:64",
          comment: "收到了！感觉东西全面，不错！"
        },
        {
          pic: "b.png",
          number: "191****1392",
          data: "2021-06-08 09:45:24",
          comment: "书包装很好，希望自己四级能过"
        },
        {
          pic: "b.png",
          number: "188****0669",
          data: "2021-05-08 09:04:24",
          comment: "可以，支持！想要最新的真题就买了"
        },
        {
          pic: "a.png",
          number: "188****0269",
          data: "2021-05-23 10:04:24",
          comment: "可以的哦，真的很好的哦"
        },
        {
          pic: "c.png",
          number: "178****0269",
          data: "2021-11-08 12:06:24",
          comment: "配套齐全，希望这次能过"
        },
        {
          pic: "d.png",
          number: "178****0269",
          data: "2020-07-08 09:06:24",
          comment: "可以可以可以可以可以"
        },
        {
          pic: "b.png",
          number: "178****0269",
          data: "2020-07-08 09:06:24",
          comment: "可以可以可以可以可以"
        },
        {
          pic: "b.png",
          number: "178****0269",
          data: "2020-07-08 09:06:24",
          comment: "可以可以可以可以可以"
        }
      ],
      bid: "",
      bookdetail: {}
    };
  },
  mounted() {
    this.bid = this.$route.params.id;
    // console.log(bid)
    this.axios.get(`/second/bookdetail/${this.bid}`).then(res => {
      // console.log(res.data[0]);
      this.bookdetail = res.data[0];
    });
  },
  methods: {
    trolley() {
      this.$router.push({
        path: `/trolley`
      });
    },
    addtrolley() {
      this.$store.commit("trolley", this.bookdetail);
      this.$toast("添加成功！");
    }
  }
};
</script>

<style scoped>
.btn {
  /* margin-right: 5.625rem !important;  */
  margin-top: 0.525rem;
}
.btn button:nth-child(1) {
  background-color: #ffaf30 !important;
  color: #fff !important;
  width: 7rem;
  border: 0;
  padding: 0.625rem;
  margin-right: 1.025rem !important;
  /* border-radius: 20% */
}
.btn button:nth-child(2) {
  background-color: rgb(255, 93, 50) !important;
  color: #fff !important;
  /* margin-right: 3.625rem !important; */
  width: 6rem;
  padding: 0.625rem;
  border: 0;
}
.di {
  position: fixed;
  bottom: 0rem;
  height: 2.875rem;
  background-color: #fff;
}
.jia {
  /* margin: 0 2.3125rem 0 2.3125rem; */
}

.di img {
  width: 1.375rem;
  height: 1.375rem;
}
.bu div:nth-child(2) {
  margin-top: 0.125rem;
  color: #8d95a1;
  margin-right: 1.25rem;
}
.bu img {
  margin-right: 0.625rem;
}
.bu {
  width: 7.5rem;
  height: 1.25rem;
  font-size: 0.75rem;
  display: flex;
  margin-left: 1.25rem;
  margin-top: 0.625rem;
}
.row-9 {
  font-size: 0.875rem;
  padding-left: 3.5625rem;
}
.row-8 span:nth-child(2) {
  font-size: 0.75rem;
  font-weight: 700;
  color: #c3c7cb;
  padding-left: 6.375rem;
}
.row-8 span:nth-child(1) {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #222831;
}
.row-8 {
  height: 2.3125rem;
  padding-top: 0.75rem;
  box-sizing: border-box;
}

.row-7 {
  display: flex;
  height: 2.3125rem;
  margin: 1.25rem 0 0.125rem 0;
}
.row-6 img {
  width: 100%;
}
.row-6 {
  width: 2.3125rem;
  height: 2.3125rem;
  border-radius: 50%;
  background-color: red;
  overflow: hidden;
  margin-right: 1.125rem;
}
.d1 span {
  margin-right: 8.125rem;
}
.d1 {
  display: flex;
  font-size: 0.7rem;
}
.van-swipe-item img {
  width: 100%;
}
.row-3 span:nth-child(1) {
  margin-right: 12.5rem;
}
.row-3 {
  color: #8d95a1;
  font-size: 0.5rem;
  margin-top: 1.25rem;
}
.row-2 span:nth-child(2) {
  color: #c3c7cb;
  font-size: 0.5rem;
}
.row-2 span:nth-child(1) {
  color: #ff5d32;
  margin-right: 0.3125rem;
}
.row-2 {
  margin-top: 0.625rem;
}
.row {
  display: block;
  box-sizing: border-box;
  padding: 0.625rem;
}
</style>
